<div
    *ngIf="isDraggingEnabled"
    (document:mousemove)="dragWidget($event)"
    (document:mouseup)="toggleDragging(false)">   
</div>
<!-- Option with resizing
<div 
    class="consoleWrapper"
    [ngClass]="{lightTheme: isLightThemeEnabled}"
    (mousedown)="toggleDragging(true)"
    [ngStyle]="style" 
    mwlResizable
    [validateResize]="validate"
    [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
    [enableGhostResize]="true"
    (resizeStart)="toggleDragging(false)"
    (resizeEnd)="onResizeEnd($event)"> -->
<div 
    class="consoleWrapper"
    [ngClass]="{lightTheme: isLightThemeEnabled}"
    (mousedown)="toggleDragging(true)"
    [ngStyle]="style">

    <div class="consoleHeader">
        <mat-tab-group class="tabs" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
            <mat-tab>
                <ng-template mat-tab-label>
                    <div class="col" style="margin-left: 20px;">GNS3 console</div>
                </ng-template>
            </mat-tab>
    
            <mat-tab *ngFor="let node of nodes; let index = index" [label]="tab">
                <ng-template mat-tab-label>
                    <div class="col" style="margin-left: 20px;">{{node.name}}</div>
                    <button style="color:white" mat-icon-button (click)="removeTab(index)">
                        <mat-icon>close</mat-icon>
                    </button>
                </ng-template>
            </mat-tab>
    
        </mat-tab-group>

        <button style="color:white" mat-icon-button (click)="close()">
            <mat-icon>close</mat-icon>
        </button>
    </div>

    <app-log-console [hidden]="!(selected.value===0)" [server]="server" [project]="project"></app-log-console>

    <div *ngFor="let node of nodes; let index = index">
        <app-web-console [hidden]="!(selected.value===(index+1))" [server]="server" [node]="nodes[index]"></app-web-console>
    </div>
</div>
